<template>
  <div class="page-wrap">
    <!--<view class="status_bar">-->
    <!--&lt;!&ndash; 这里是状态栏 &ndash;&gt;-->
    <!--</view>-->
    <!--<div class="control flex">-->
    <!--<fun-icons color="#81ce69" class="icon iconsetting" name="iconsetting" size="22"></fun-icons>-->
    <!--<fun-icons color="#81ce69" class="icon iconemail" name="iconemail" size="22"></fun-icons>-->
    <!--</div>-->
    <div class="userinfo flex" >
      <div class="headimgbox">
        <image class="headimg" :src="userInfo.headimg||'/static/home-logo200.png'" />
      </div>
      <div v-if="userInfo.id" class="info flex1">
        <div class="nickname m-b-10">{{userInfo.nickname}}</div>
        <div class="cashing_money m-b-6">可提现 <span class="price">￥{{extInfo.cashing_money}}</span></div>
        <div class="birthday">提现中金额{{extInfo.freeze_money}} 累计提现 {{extInfo.cashed_money}}</div>
      </div>
      <div>
        <button size="mini" v-if="userInfo.is_distributor" @click="toWithdrawList" class="withdraw-btn2">我要分享</button>
        <button size="mini" @click="toWithdraw" class="withdraw-btn">发起提现</button>
      </div>
    </div>

    <div class="tabs">
      <div class="tab-item" @click="activeTabIndex=0">
        <div class="content">
          <div class="title">收益记录</div>
          <div v-show="activeTabIndex==0" class="underline"></div>
        </div>
      </div>
      <div class="tab-item" @click="activeTabIndex=1">
        <div class="content">
          <div class="title">提现记录</div>
          <div v-show="activeTabIndex==1" class="underline"></div>
        </div>
      </div>
    </div>

    <div class="container m-10" v-show="activeTabIndex==0">
      <div class="item" v-for="(item,idx) in addList" :key="idx">
        <div class="row flex flex-justify-between">
          <div class="c9">变更类型</div>
          <div class="color-primary">{{item.type_text}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">变动金额</div>
          <div class="color-primary">+{{item.amount}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">描述</div>
          <div class="graytext font12">{{item.content}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">变动时间</div>
          <div class="graytext font12">{{item.create_at}}</div>
        </div>
      </div>
    </div>
    <!--channel_text: "银行卡"-->
    <!--charge: "0.44"-->
    <!--check_admin: null-->
    <!--check_at: null-->
    <!--check_status: 0-->
    <!--check_text: "待审核"-->
    <!--create_at: "2019-12-12 21:27:28"-->
    <!--guid: null-->
    <!--id: 120-->
    <!--is_deleted: 0-->
    <!--number: "22.00"-->
    <!--pay_at: null-->
    <!--pay_channel: 3-->
    <!--real_number: "21.56"-->
    <!--transalte_admin: null-->
    <!--transalte_at: null-->
    <!--transalte_status: 0-->
    <!--transalte_text: "无需处理"-->
    <!--update_at: "2019-12-12 21:27:28"-->
    <!--user_bank_name: "华夏银行"-->
    <!--user_bank_subbranch: "郑州支行"-->
    <!--user_bank_username: "汪洋"-->
    <!--user_card_num: "6222600260001072444"-->
    <!--user_id: 86175-->
    <div class="container m-10" v-show="activeTabIndex==1">
      <div class="item" v-for="(item,idx) in minusList" :key="idx">
        <div class="row flex flex-justify-between">
          <div class="c9">审核状态</div>
          <div class="color-primary">{{item.check_text}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">转账状态</div>
          <div class="color-primary">{{item.transalte_text}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">提现金额</div>
          <div class="">￥{{item.number}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">手续费</div>
          <div class="">-￥{{item.charge}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">实际提现金额</div>
          <div class="price">￥{{item.real_number}}</div>
        </div>
        <!--<div class="row flex flex-justify-between">-->
        <!--<div class="c9">审核时间</div>-->
        <!--<div class="graytext font12">{{item.check_at}}</div>-->
        <!--</div>-->
        <!--<div class="row flex flex-justify-between">-->
        <!--<div class="c9">转账时间</div>-->
        <!--<div class="graytext font12">{{item.transalte_at}}</div>-->
        <!--</div>-->
        <div class="row flex flex-justify-between">
          <div class="c9">申请时间</div>
          <div class="graytext font12">{{item.create_at}}</div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'
import { flashUserInfo, getUserAmountLog, withdraw } from '@/api'
import { pageMixin } from '@/mixins'

export default {
  mixins: [pageMixin],
  components: {

  },
  data () {
    return {
      activeTabIndex: 0,
      addList: [],
      minusList: [],
      extInfo: {
        freeze_money: 0,
        cashed_money: 0,
        cashing_money: 0
      }
    }
  },
  methods: {
    toWithdrawList () {
      uni.navigateTo({
        url: '/pages/distributor/list'
      })
    },
    toWithdraw () {
      uni.navigateTo({
        url: '/pages/distributor/withdraw'
      })
    },
    toDistributor () {
      uni.navigateTo({
        url: '/pages/distributor'
      })
    },
    toVip () {
      uni.navigateTo({
        url: '/pages/user/vip'
      })
    },
    toProfile () {
      uni.navigateTo({
        url: '/pages/user/profile'
      })
    },
    toLogin () {
      uni.navigateTo({
        url: '/pages/user/login'
      })
    },
    async init () {
      await flashUserInfo({ type: 'ext' }, { tip: '' }).then(res => {
        this.extInfo = res.data
      })
      // 代表获取两种类型一起
      await getUserAmountLog({ size: 999, type: 'spread&&leader', action: 1 }).then(res => {
        this.addList = res.data.list
      })

      await withdraw({ size: 999 }).then(res => {
        this.minusList = res.data.list
      })
    },
    ...mapActions(['user/setUserInfo'])
  },
  onLoad () {
    console.log(22)
  },
  onShow () {
    this.init()
  },

  computed: {
    userInfo () {
      return this.$store.getters['user/getUserInfo']()
    }

  }
}
</script>

<style lang="scss" scoped="scoped">
.withdraw-btn{
  background: $fun-primary-color;
  color: white;
}
.withdraw-btn2{
  display: block;
  margin-bottom: 10px;
}
.page-wrap{
  background: #f8f8f8;
  padding-bottom: 50px;

}
.control{
  justify-content: space-between;
  padding: 20rpx 40rpx;
}

.userinfo{
  padding: 25rpx;
  align-items: center;
  .headimgbox{
    .headimg{
      width: 124rpx;
      height: 124rpx;
      border-radius: 50%;
    }
  }
  .info{
    padding: 20rpx 0 20rpx 20rpx;
    .tip{
      font-size: 36rpx;
      line-height: 48rpx;
      font-weight: 500;
      color: #333;
    }
    .tipsmall{
      font-size: 28rpx;
      line-height: 40rpx;
      color: #777;
    }
    .nickname{
      line-height: 48rpx;
      font-size: 36rpx;
      font-weight: 500;
    }
    .cashing_money{
      color: #777;
      font-size: 32rpx;
      line-height: 40rpx;
    }
    .birthday{
      color: #777;
      font-size: 12px;
      line-height: 40rpx;
      .level{
        margin-left: 10px;
        font-size: 12px;
        padding: 0 4px;
        display: inline-block;
        background: #f4b93f;
        border-radius: 4px;
        color:white;
        &.active{
          background: $fun-primary-color;
        }
      }
    }
  }
}

.tabs{
  display: flex;
  padding: 15px 0 10px;
  .tab-item{
    flex: 1;
    color: #444;
    .content{
      width: 80px;
      margin: 0 auto;
      .title{
        text-align: center;
        padding-bottom: 10px;
      }
      .underline{
        background: $fun-primary-color;
        height: 4px;
        border-radius: 2px;
        width: 20px;
        margin: 0 auto;
      }

    }
  }
}

.container{
  font-size: 14px;
  background: #f8f8f8;
  .item{
    background: white;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    .row{
      padding: 6px 0;
    }
  }
}
</style>
